<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="/tld/authority.tld" prefix="authority" %>
<%@ taglib uri="/tld/token.tld" prefix="token" %>
<%@ taglib prefix="C" uri="http://java.sun.com/jsp/jstl/core" %>

<div class="pop-background">
    <style>
        .col-md-4 {
            max-width: 900px;
        }
    </style>
    <div class="col-md-4">
        <div class="popup popup3 panel-alt x-4-move">
            <div class="panel-heading">
                <div class="panel-btns">
                    <a class="panel-close btn-4-hide">×</a>
                </div>
                <h3 class="panel-title">系统角色：（${role.name}）菜单管理</h3>
            </div>

            <div class="tab-content">
                <div class="panel-tab panel-default">
                    <div class="row ">
                        <input type="hidden" name="id" value="${role.id}">
                        <form>
                            <token:token/>
                            <div class="panel-body panel-body-h" style="padding-top:0">
                                <div class="display-table display-table-xs ">
                                    <ul class="display-table lv1">
                                        <c:forEach items="${menuList}" var="item1">
                                            <li>
                                                <P class="display-table bj-green-lit display-table-tr">
                                                    <span style="width:43px" class="table-cell">
                                                        <i class="icon icon-shousuo cursor-pointer btn-4-shrink"></i>
                                                    </span>
                                                    <span style="width:40%" class="table-cell">
                                                        <input class="cursor-pointer lv1-${item1.id}"
                                                               type="checkbox" ${item1.checked ? 'checked' : ''}
                                                               name="menuId" value="${item1.id}">${item1.name}
                                                    </span>
                                                    <span style="width:7%" class="table-cell">
                                                        <i class="${item1.iconStyle}"></i>
                                                    </span>
                                                    <span class="table-cell">${item1.uri}</span>
                                                </P>
                                                <c:forEach items="${item1.children}" var="item2">
                                                    <ul class="display-table lv2">
                                                        <li class="table-row">
                                                            <p class="display-table">
                                                                <span style="width:43px" class="table-cell"></span>
                                                                <span style="width:40%; padding-left:35px;"
                                                                      class="table-cell">
                                                                    <input class="cursor-pointer lv1-${item1.id}-lv2-${item2.id} lv1-${item1.id}-lv2"
                                                                           data-lv="lv1-${item1.id}"
                                                                           type="checkbox" ${item2.checked ? 'checked' : ''}
                                                                           name="menuId"
                                                                           value="${item2.id}">${item2.name}
                                                                </span>
                                                                <span style="width:7%" class="table-cell">
                                                                    <i class="${item2.iconStyle}"></i>
                                                                </span>
                                                                <span class="table-cell">${item2.uri}</span>
                                                            </p>
                                                            <c:forEach items="${item2.children}" var="item3">
                                                                <ul class="display-table lv3">
                                                                    <li style="width:43px" class="table-cell"></li>
                                                                    <li style="width:40%; padding-left:60px;"
                                                                        class="table-cell">
                                                                        <input class="cursor-pointer lv1-${item1.id}-lv2-${item2.id}-lv3-${item3.id} lv1-${item1.id}-lv2-${item2.id}-lv3"
                                                                               data-lv="lv1-${item1.id}-lv2-${item2.id}"
                                                                               type="checkbox" ${item3.checked ? 'checked' : ''}
                                                                               name="menuId"
                                                                               value="${item3.id}">${item3.name}
                                                                    </li>
                                                                    <li style="width:7%" class="table-cell">
                                                                        <i class="${item3.iconStyle}"></i>
                                                                    </li>
                                                                    <li class="table-cell">${item3.uri}</li>
                                                                </ul>
                                                            </c:forEach>
                                                        </li>
                                                    </ul>
                                                </c:forEach>
                                            </li>
                                        </c:forEach>
                                    </ul>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="btn-group2-s">
                        <div class="panel-body panel-body2">
                            <div class="btn-group2 left ">
                                <%--<authority:authority url="/role/modifyMenu">--%>
                                    <button class="btn btn-primary btn-4-save">保存</button>
                                <%--</authority:authority>--%>
                                <button class="btn btn-default btn-4-hide">取消</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="js/system/role-menu.js"></script>
</div>

